<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>发布评论</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#box{
				margin: 0 auto;
				border: #BEBEBE 0.125rem  solid;
				width: 590px;
			}
			#ul{
				margin-left: 30px;
				list-style: none;
			}
			#fb{
				margin-left: 550px;
				
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="box-top">
				<textarea rows="10" cols="80" placeholder="请输入你的评论" id="commit"></textarea>
				<button type="button" id="fb">发布</button>
				<ul id="ul">

				</ul>
			</div>
			
		</div>
		<script type="text/javascript">
			window.onload = function(){
				var commit = document.getElementById('commit');
				var fb = document.getElementById('fb');
				var sc = document.getElementById('sc');
				var ul = document.getElementById('ul');
				var newLi = '';
				fb.onclick = function(){
					var commits = commit.value;
					if(commits.length == 0 ){
						alert("请输入内容");
						return;
					}
					newLi = document.createElement('li');
					newLi.innerHTML = commits+'<a href="#">删除</a>';
					ul.appendChild(newLi);
					commit.value='';
				}
				var det = document.getElementsByTagName('a');
				for(var i = 0 ; i < det.length ; i++){
					det[i].onclick = function(){
						li.innerHTML = '';
						
					}
				}
			}
		</script>
	</body>
</html>
